<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navbar-left">
				<navigator open-type="navigateBack" :delta="1" class="back-navigator">
					<view class="back-content">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="navbar-title">员工详情</text>
					</view>
				</navigator>
			</view>
		</u-navbar>

		<!-- 主内容区 -->
		<view class="content-container">
			<view class="employee-card">
				<view class="employee-header">
					<view class="avatar-container">
						<text class="avatar-text">{{ currentEmployee.name.charAt(0) }}</text>
					</view>
					<text class="employee-name">{{ currentEmployee.name }}</text>
					<view class="employee-position">{{ currentEmployee.position }} |{{ currentEmployee.department }}
					</view>
				</view>

				<view class="info-section">
					<!-- 每个信息项单独占一行 -->
					<view class="info-item-single">
						<text class="info-label">工号:</text>
						<text class="info-value">{{ currentEmployee.employeeNo }}</text>
					</view>
					<view class="info-item-single">
						<text class="info-label">员工类型:</text>
						<text class="info-value">{{ getEmployeeTypeText(currentEmployee.employeeType) }}</text>
					</view>
					<view class="info-item-single">
						<text class="info-label">性别:</text>
						<text class="info-value">{{ currentEmployee.gender || '未填写' }}</text>
					</view>
					<view class="info-item-single">
						<text class="info-label">手机号码:</text>
						<text class="info-value">{{ currentEmployee.phone || '未填写' }}</text>
					</view>
					<view class="info-item-single">
						<text class="info-label">身份证号:</text>
						<text class="info-value">{{ currentEmployee.idCard || '未填写' }}</text>
					</view>
					<view class="info-item-single">
						<text class="info-label">入职日期:</text>
						<text class="info-value">{{ currentEmployee.hireDate || '未填写' }}</text>
					</view>
					<view class="info-item-single">
						<text class="info-label">试用期:</text>
						<text
							class="info-value">{{ currentEmployee.probation ? currentEmployee.probation + '个月' : '未填写' }}</text>
					</view>
					<view class="info-item-single">
						<text class="info-label">联系地址:</text>
						<text class="info-value">{{ currentEmployee.address || '未填写' }}</text>
					</view>
					<view class="info-item-single">
						<text class="info-label">备注:</text>
						<text class="info-value">{{ currentEmployee.remark || '无' }}</text>
					</view>
				</view>

				<view class="insurance-section">
					<text class="section-title">保险信息</text>
					<view class="insurance-item-single">
						<text class="insurance-label">社保状态:</text>
						<text class="insurance-value">{{ insuranceInfo.socialInsuranceEnable ? '已启用' : '未启用' }}</text>
					</view>
					<view class="insurance-item-single" v-if="insuranceInfo.socialInsuranceEnable">
						<text class="insurance-label">社保基数:</text>
						<text class="insurance-value">{{ insuranceInfo.socialInsuranceBase || '0' }}</text>
					</view>
					<view class="insurance-item-single" v-if="insuranceInfo.socialInsuranceEnable">
						<text class="insurance-label">养老保险:</text>
						<text class="insurance-value">{{ insuranceInfo.pensionPercentage * 100 }}%</text>
					</view>
					<view class="insurance-item-single" v-if="insuranceInfo.socialInsuranceEnable">
						<text class="insurance-label">医疗保险:</text>
						<text class="insurance-value">{{ insuranceInfo.medicalPercentage * 100 }}%</text>
					</view>
					<view class="insurance-item-single">
						<text class="insurance-label">公积金状态:</text>
						<text class="insurance-value">{{ insuranceInfo.fundEnable ? '已启用' : '未启用' }}</text>
					</view>
					<view class="insurance-item-single" v-if="insuranceInfo.fundEnable">
						<text class="insurance-label">公积金基数:</text>
						<text class="insurance-value">{{ insuranceInfo.fundBase || '0' }}</text>
					</view>
					<view class="insurance-item-single" v-if="insuranceInfo.fundEnable">
						<text class="insurance-label">公积金比例:</text>
						<text class="insurance-value">{{ insuranceInfo.fundPercentage * 100 }}%</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getEmployeeByIdApi
	} from "@/api/employee.js"
	export default {
		data() {
			return {
				currentEmployee: {},
				insuranceInfo: {}
			};
		},
		onLoad(options) {
			console.log('查看员工页面加载完成，员工ID:', options.id);
			this.loadEmployeeData(options.id);
		},
		methods: {
			async loadEmployeeData(id) {
				try {
					const res = await getEmployeeByIdApi(id)
					console.log("接口返回数据:", res);

					if (res.code === 200 && res.data) {
						// 保存员工基本信息
						this.currentEmployee = res.data || {};
						// 保存保险信息
						this.insuranceInfo = res.data.insurance || {};
					} else {
						console.error("获取员工信息失败:", res.msg);
						// 可以在这里添加错误提示
					}
				} catch (error) {
					console.error("请求员工信息出错:", error);
					// 可以在这里添加错误提示
				}
			},

			getEmployeeTypeText(type) {
				// 根据接口文档，type是数字类型
				switch (type) {
					case '1':
						return '正式员工';
					case '2':
						return '合同工';
					case '3':
						return '临时工';
					default:
						return '未知类型';
				}
			}
		}
	};
</script>

<style>
	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
	}

	.navbar-left {
		display: flex;
		align-items: center;
	}

	.back-navigator {
		display: flex;
		align-items: center;
	}

	.back-content {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 16px;
		font-weight: 600;
		color: #1e88e5;
		margin-left: 8px;
	}

	.content-container {
		margin: 0 auto;
		padding: 16px;
	}

	.employee-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}

	.employee-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 24px;
	}

	.avatar-container {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background-color: #e3f2fd;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1e88e5;
		margin-bottom: 12px;
	}

	.avatar-text {
		font-size: 24px;
		font-weight: 500;
	}

	.employee-name {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 4px;
	}

	.employee-position {
		font-size: 12px;
		color: #6b7280;
	}

	.info-section,
	.insurance-section {
		background-color: #f9fafb;
		padding: 16px;
		border-radius: 8px;
		margin-bottom: 16px;
	}

	/* 每个信息项单独占一行 */
	.info-item-single,
	.insurance-item-single {
		display: flex;
		align-items: flex-start;
		margin-bottom: 12px;
		font-size: 14px;
	}

	.info-item-single:last-child,
	.insurance-item-single:last-child {
		margin-bottom: 0;
	}

	.info-label,
	.insurance-label {
		color: #6b7280;
		margin-right: 8px;
		width: 80px;
		flex-shrink: 0;
		font-size: 14px;
	}

	.info-value,
	.insurance-value {
		color: #1f2937;
		flex: 1;
		word-wrap: break-word;
		word-break: break-all;
		font-size: 14px;
	}

	.section-title {
		display: block;
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 12px;
		color: #1f2937;
	}
</style>